<template>
  <cloudPage :isLoading="pageLoading">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;"
        >
          {{ $t("otc.order.appeal_detail.title") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="detail-container" v-if="!pageLoading">
      <view class="complaint-content">
        <view class="title">{{ $t("otc.order.appeal_detail.content") }}</view>
        <view class="text">{{ reDetail.reason }} </view>
        <view class="img">
          <image
            class="imgList"
            v-for="(item, index) in reDetail.image_list"
            :key="index"
            :src="item"
            @tap.stop="_previewImage(index)"
          />
        </view>
      </view>
      <view class="complaint-info">
        <view class="title-info">{{
          $t("otc.order.appeal_detail.orderinfo")
        }}</view>
        <view class="info-content">
          <view class="info-name info-dp">
            <view>{{ $t("otc.order.appeal_detail.orderno") }}:</view>
            <view>{{ $t("otc.order.appeal_detail.appealtime") }}:</view>
            <view>{{ $t("otc.order.appeal_detail.appealstatus") }}:</view>
          </view>
          <view class="info-text info-dp">
            <view>{{ reDetail.no }}</view>
            <view>{{ reDetail.created_at | moment("YY-MM-DD HH:mm:ss") }}</view>
            <view style="color:#F4876A;"
              >{{
                reDetail.status == -1
                  ? $t("otc.order.appeal_detail.unprocessed")
                  : ""
              }}{{
                reDetail.status == 1
                  ? $t("otc.order.appeal_detail.dismissed")
                  : ""
              }}{{
                reDetail.status == 2 ? $t("otc.order.appeal_detail.passed") : ""
              }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      pageLoading: true,
      reDetail: {},
      reID: undefined
    };
  },
  async onLoad(option) {
    this.reID = option.id;
    this.reDetail = await this.getTradeAppeal({
      id: this.reID
    });
    this.pageLoading = false;
    console.log(this.reDetail);
  },
  methods: {
    ...mapActions("otc", ["getTradeAppeal"]),
    // 图片预览
    _previewImage(index) {
      uni.previewImage({
        urls: this.reDetail.image_list,
        current: this.reDetail.image_list[index]
      });
    }
  }
};
</script>

<style scoped>
.detail-container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.complaint-content {
  width: 100%;
  padding: 30rpx 20rpx 20rpx 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}
.title {
  height: 29rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 550;
  color: rgba(50, 50, 50, 1);
  line-height: 36rpx;
  margin-bottom: 57rpx;
}
.text {
  width: 100%;
  font-size: 28rpx;
  line-height: 40rpx;
  font-weight: 400;
  color: #6f6f6f;
  margin-bottom: 34rpx;
}
.imgList {
  width: 192rpx;
  height: 192rpx;
  background-size: contain;
  margin-right: 20rpx;
}
.complaint-info {
  width: 100%;
  height: 287rpx;
  padding: 30rpx 20rpx 0 20rpx;
  background-color: #fff;
  box-sizing: border-box;
}
.title-info {
  height: 56rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 550;
  color: rgba(50, 50, 50, 1);
  line-height: 36rpx;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}
.info-content {
  width: 100%;
  height: 100%;
  display: flex;
}
.info-dp view {
  height: 60rpx;
  line-height: 60rpx;
}
.info-name {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(50, 50, 50, 1);
  margin-right: 55rpx;
}
.info-text {
  font-size: 28px;
  font-family: Heiti SC;
  font-weight: 300;
  color: rgba(50, 50, 50, 1);
}
</style>
